<script setup>
import { useWatch } from '@/hooks';
const emit = defineEmits(['changeType']);
const props = defineProps({
  engList: { type: Array, default: [] },
});
const active = ref(null);
const handleClick = val => {
  active.value = val;
  emit('changeType', val);
};
useWatch(()=>props.engList,n=>{
  console.log(n,'0000')
  if(n){
    active.value = n?.[0]?.id
  }
})
</script>
<template>
  <div class="u-w100 u-df-spb u-base-fg u-fs14">
    能源类型
    <div class="u-df-st u-ptb10 energy">
      <div
        class="energy-item"
        :style="{width:`calc((100% / ${engList.length}) - 2%)`}"
        v-for="item in engList"
        :key="item.id"
        :class="active == item.id ? 'energy-active' : ''"
        @click="handleClick(item.id)"
      >
        {{ item.energyName }}能
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.u-ptb10 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.energy{
  width:calc(100% - 65px)
}

.energy-item {
  text-align: center;
  border-radius: 5px;
  font-size: 14px;
  padding: 6px 30px;
  margin-right: 7px;
  cursor: pointer;
}

.app-light {
  .energy-item {
    background-color: #ebeef5;
  }

  .energy-active {
    background-color: #409eff !important;
    color: #fff;
  }
}

.app-dark {
  .energy-item {
    background-color: #252f4a;
  }

  .energy-active {
    background: #068bba !important;
    color: #fff;
  }
}
</style>
